<template>
  <div class="page-container-padding">
    <div>
      <el-button
        icon="el-icon-refresh"
        size="mini"
        type="primary"
        :loading="refreshLoading"
        @click="refreshMyLecture"
      >
        刷新状态
      </el-button>
      <div style="margin: 6px 0; color: #007fce; font-weight: 600">
        点击对应的状态，可查看申请进度或明细。
      </div>
    </div>
    <div>
      <el-table :data="recordData.data" border stripe>
        <el-table-column label="状态" width="85">
          <template #default="scope">
            <div
              :class="
                scope.row.state === 0
                  ? 'black'
                  : scope.row.state < 0
                  ? 'red'
                  : 'green'
              "
              @click="toShowState(scope.row)"
            >
              {{ scope.row.state_text }}
              <i class="el-icon-info"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="160" />
        <el-table-column prop="visit_to" label="走访对象" />
        <el-table-column prop="visit_site" label="走访地点" />
        <el-table-column prop="visit_time" label="走访时间" width="160" />
        <el-table-column
          show-overflow-tooltip
          prop="link_msg"
          label="联系方式"
        />
        <el-table-column
          show-overflow-tooltip
          prop="content"
          label="目的要求"
        />
      </el-table>
    </div>
    <!-- 页码器 -->
    <div style="margin-top: 8px">
      <el-pagination
        style="margin-top: 5px"
        background
        hide-on-single-page
        :current-page="recordData.page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="recordData.totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
    <!-- 弹窗步骤 -->
    <el-dialog
      :visible.sync="showState"
      title="状态详情(ESC退出)"
      :close-on-click-modal="false"
    >
      <div style="margin: 10px 30px">
        <div class="dialog-topic">
          {{ currentRow.rowTopic }}
        </div>
        <el-steps
          :active="currentRow.rowState"
          align-center
          finish-status="success"
        >
          <el-step
            title="申请中"
            description="提交成功，等待任务处理"
          ></el-step>
          <el-step
            title="进行中"
            description="材料或任务正在安排中..."
          ></el-step>
          <el-step title="已完成" description="已完成,可查阅资料"></el-step>
        </el-steps>
        <div v-if="currentRow.rowState >= 2">
          <div class="annex-block">
            <div class="dialog-label">
              相关资料
              <span
                v-if="!evaluate.canDownload"
                style="color: #f45200; font-size: 12px; font-weight: 100"
              >
                您可先进行材料预览（根据材料大小预览准备时间可能比较长，请耐心等待），评价以后资料可下载。
              </span>
            </div>
            <div style="display: flex; align-items: center">
              <div style="margin-left: 16px">{{ currentRow.annexName }}</div>
              <div v-if="currentRow.hasAnnex" style="margin-left: auto">
                <el-button
                  v-if="evaluate.canDownload"
                  type="primary"
                  size="mini"
                  :loading="annexLoading"
                  @click="toDownloadAnnex"
                >
                  下载
                </el-button>
                <el-button
                  v-else
                  type="primary"
                  size="mini"
                  :loading="previewItem.previewLoading"
                  @click="previewFile"
                >
                  {{ previewItem.previewLoading ? '预览准备中' : '预览' }}
                </el-button>
              </div>
            </div>
          </div>
          <div class="evaluate-block">
            <div class="dialog-label">
              评价
              <span
                v-if="currentRow.rowScore <= 0"
                style="color: #f45200; font-size: 13px; font-weight: 100"
              ></span>
            </div>
            <div>
              <el-rate v-model="evaluate.score" :max="5"></el-rate>
              <el-input
                v-model="evaluate.evaluate"
                type="textarea"
                placeholder="在此填写评价，评价完成后若有附件资料可下载相关资料"
              ></el-input>
            </div>
            <div style="margin-top: 10px">
              <el-button
                type="primary"
                size="mini"
                :loading="evaluate.loading"
                :disabled="evaluate.disabled"
                @click="toEvaluate"
              >
                {{ currentRow.rowScore > 0 ? '已评价' : '提交评价' }}
              </el-button>
              <el-checkbox
                v-model="evaluate.anonymous"
                style="margin-left: 10px"
              >
                匿名评价
              </el-checkbox>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 拒绝的理由弹窗 -->
    <el-dialog :visible.sync="showReject" title="拒绝详情">
      <div style="margin: 10px 30px">
        <div class="dialog-topic">
          {{ currentRow.rowTopic }}
        </div>
        <div class="reject-dialog-label">原因表述</div>
        <div class="reject-palin">{{ currentRow.rejuectPlain }}</div>
      </div>
    </el-dialog>
    <!-- 预览文件的窗口 -->
    <el-dialog
      v-if="showPreview"
      :visible.sync="showPreview"
      :title="previewItem.title"
      :close-on-click-modal="false"
      custom-class="preview-dialog"
      width="70%"
      top="3%"
    >
      <div style="height: 75vh; overflow: scroll">
        <div
          v-for="(img, index) in previewItem.images"
          :key="index"
          class="img-item"
        >
          <el-image :src="img" fit="contain" lazy></el-image>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { GetBlob } from '@/utils/dataUtils'
  import {
    QueryMyAccompany,
    EvaluateMyAccompany,
    GetAccompanyPreviewImages,
  } from '@/api/prodService/accompany'
  export default {
    data() {
      return {
        refreshLoading: false,
        annexLoading: false,
        page: 1,
        pageSize: 30,
        recordData: {
          data: [],
          page: 1,
          totalCount: 0,
        },
        showState: false,
        currentRow: {
          rowId: -1,
          rowTopic: '',
          rowState: null,
          rowScore: 0,
          rejuectPlain: '',
          hasAnnex: false,
          annexName: '',
          canDownload: false,
          annexUrl: '',
        },
        evaluate: {
          loading: false,
          btnDiabled: false,
          score: 0,
          evaluate: '',
          anonymous: false,
        },
        showReject: false,
        showPreview: false,
        previewItem: {
          previewLoading: false,
          recordId: -1,
          title: '预览资料',
          annexName: '',
          images: [],
        },
      }
    },
    mounted() {
      this.getMyAccompany()
    },
    methods: {
      getMyAccompany() {
        this.refreshLoading = true
        QueryMyAccompany(this.page, this.pageSize)
          .then((res) => {
            console.log(res)
            const data = res.data
            this.recordData.data = data.data
            this.recordData.totalCount = data.total_count
            this.recordData.page = data.page
            this.refreshLoading = false
          })
          .catch(() => {
            this.$baseMessage('获取数据出错了...', 'error')
            this.refreshLoading = false
          })
      },
      // 刷新状态
      refreshMyLecture() {
        this.getMyAccompany()
      },

      // 显示状态步骤
      toShowState(row) {
        this.currentRow.annexUrl = ''
        if (row.state < 0) {
          this.currentRow.rowTopic = row.topic
          this.currentRow.rejuectPlain = row.state_plain
          this.showReject = true
          return
        } else {
          this.currentRow.rowId = row.id
          this.currentRow.rowTopic = row.topic
          this.currentRow.rowState = row.state === 2 ? row.state + 1 : row.state
          this.currentRow.rowScore = row.evaluate
          this.currentRow.annexName = row.annex_name
          this.currentRow.hasAnnex = row.has_annex
          this.evaluate.disabled = false
          this.evaluate.canDownload = false
          this.evaluate.score = 0
          this.evaluate.anonymous = false
          this.evaluate.evaluate = ''
          if (row.evaluate > 0) {
            this.evaluate.score = row.evaluate
            this.evaluate.evaluate = row.evaluate_plain
            this.evaluate.anonymous = row.is_anonymous
            this.currentRow.annexUrl = row.annex_url || ''
            this.evaluate.disabled = true // 评价按钮不可用
            this.evaluate.canDownload = true // 可下载资料
          }
          this.showState = true
        }
      },

      // 预览文件
      previewFile() {
        this.previewItem.recordId = -1
        this.previewItem.images = []
        // 发送请求获取预览图片数据
        this.previewItem.previewLoading = true
        GetAccompanyPreviewImages(this.currentRow.rowId).then((res) => {
          const data = res.data
          this.previewItem.recordId = data.id
          this.previewItem.images = data.images
          this.previewItem.title = data.topic
          this.previewItem.previewLoading = false
          setTimeout(() => {
            this.showPreview = true
          }, 500)
        })
      },

      // 下载文件
      toDownloadAnnex() {
        if (!this.currentRow.annexUrl) {
          this.$baseMessage('附件文件不存在!', 'error')
          return
        }
        this.annexLoading = true
        GetBlob(this.currentRow.annexUrl).then((blob) => {
          let a = document.createElement('a')
          a.href = window.URL.createObjectURL(blob)
          a.target = '_blank'
          a.download = this.currentRow.annexName
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          this.annexLoading = false
        })
      },

      // 提交评价
      toEvaluate() {
        const data = {
          id: this.currentRow.rowId,
          evaluate: this.evaluate.score,
          evaluate_plain: this.evaluate.evaluate,
          is_anonymous: this.evaluate.anonymous,
        }
        if (data.evaluate < 1 || data.evaluate_plain.length < 1) {
          this.$baseMessage('请先填写内容', 'error')
          return
        }
        this.evaluate.loading = true
        EvaluateMyAccompany(data)
          .then((res) => {
            // console.log(res)
            const data = res.data
            if (data.evaluate && data.evaluate > 0) {
              this.evaluate.canDownload = data.has_annex
              this.evaluate.score = data.evaluate
              this.currentRow.rowScore = data.evaluate
              this.currentRow.annexUrl = data.annex_url
              this.currentRow.hasAnnex = data.has_annex
              this.evaluate.disabled = true
            }
            this.$baseMessage('评价成功!', 'success')
            this.evaluate.loading = false
            this.getMyAccompany()
          })
          .catch(() => {
            this.evaluate.loading = false
          })
      },
      // 页码改变
      currentPageChanged(page) {
        this.page = page
        this.getMyAccompany()
      },
    },
  }
</script>
<style scoped lang="scss">
  .black {
    color: #000000;
    cursor: pointer;
  }
  .green {
    color: #0dd068;
    cursor: pointer;
  }
  .red {
    color: #e74736;
    cursor: pointer;
  }
  .dialog-topic {
    line-height: 30px;
    margin-bottom: 30px;
    color: #349cfc;
    font-size: 18px;
  }
  .annex-block {
    background-color: rgb(200, 200, 200, 0.2);
    border: 1px solid rgb(200, 200, 200, 0.3);
    padding: 8px;
    margin-top: 16px;
  }
  .evaluate-block {
    margin-top: 16px;
  }
  .dialog-label {
    line-height: 30px;
    color: #008efc;
    font-weight: 700;
    font-size: 16px;
  }
  .reject-dialog-label {
    line-height: 30px;
    color: #e74736;
    font-weight: 700;
    font-size: 16px;
    margin-top: 20px;
  }
  .reject-palin {
    line-height: 30px;
    font-size: 16px;
    text-indent: 2em;
  }
  .preview-dialog {
    text-align: center;
    img {
      width: 100%;
    }
    .img-item {
      margin-bottom: 10px;
      text-align: center;
      min-height: 150px;
      box-shadow: 2px 2px 5px #888888;
    }
  }
</style>
